<template>
  <div class="serviceMain">
    <fundation-header :title="'基金服务开通'"></fundation-header>
    <group gutter='0.2rem'>
      <cell v-for="(item,index) in idInfos" :key="index" :title="item.infoTitle" :value="item.val"></cell>
      <cell title="通讯地址">
        <div><input type="text" placeholder="请输入" ></div>
      </cell>
      <cell title="邮政编码">
        <div><input type="text" placeholder="请输入" ></div>
      </cell>
      <cell title="Email">
        <div><input type="text" placeholder="请输入" ></div>
      </cell>
    </group>
    <group gutter='0.2rem'>
      <cell title="东亚银行证券投资基金投资人权益须知" is-link></cell>
    </group>
     <div class="dealtip">
      <i class='selecttip' @click='tipClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="agreenTip"></i>
      <p>本人已阅读并同意<a  class="dealCheck" @click="showInverseTip">《证券投资基金投资人权益须知》</a></p>
    </div>
      <x-button @click.native="submitAction" plain type="primary" class="submitBtn" :class="{'forbiden':noSubmit}" :disabled="noSubmit">提交</x-button>

  </div>
</template>
<script>
import FundationHeader from './fundationHeader'

export default {

  components: {
    FundationHeader
  },
  data () {
    return {
      idInfos: [
        {infoTitle: '客户姓名', val: '李*'},
        {infoTitle: '证件类型', val: '居民身份证'},
        {infoTitle: '证件号码', val: '44078*****8978'},
        {infoTitle: '手机号码', val: '134****9878'}
      ],
      agreenTip: false,
      noSubmit: true
    }
  },
  methods: {
    showInverseTip () {
      console.log('跳转须知')
      this.$router.push({name: 'fundationTip'})
    },
    tipClick () {
      this.agreenTip = !this.agreenTip
      this.noSubmit = !this.agreenTip
    },
    submitAction () {
      console.log('tijiao')
      this.$router.push({name: 'serviceResult'})
    }
  }
}
</script>
<style lang="less" scoped>

  .serviceMain{
    input{
      text-align: right;
    }
  .dealtip{
    margin-top: 0.28rem;
    padding-left: 0.3rem;
    overflow: hidden;
    &>p{
      float: left;
      width:6.43rem;
      font-size:0.22rem;
      line-height: 0.35rem;
      color: #ccc;
      .dealCheck{
        color: #3333ff;
      }
    }
    &>i{
      float: left;
      margin-left: 0px;
      margin-right: 0.15rem;
      &>img{
        vertical-align: top;
        width: 100%;
        height: auto;
      }
    }
  }
  .selecttip{
    position: relative;
    display: inline-block;
    width: 0.28rem;
    height: 0.28rem;
    border: 1px solid #bfbfbf;
    margin-left:0.6rem;
    margin-right:0.23rem;
    vertical-align: top;
    &>img{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
    }
  }
    .weui-cell {
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      font-size: 0.28rem;
      line-height: 0.28rem;
    }
  .submitBtn{
    line-height:0.88rem;
    width:6.9rem;
    margin-left: 0.3rem;
    margin-top: 0.49rem;
    background: #EC1B30;
    font-size: 0.3rem;
    border-radius: 0.06rem;
    color: white;
    border-width: 0rem;
    &.forbiden{
      opacity: .5;
    }
  }
  }

</style>
